<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="120px" style="padding-right: 40px">
            <el-form-item prop="password" label="新密码:">
              <el-input show-password v-model="form.password" placeholder="请输入密码" maxlength="20"> </el-input>
            </el-form-item>
            <el-form-item prop="password1" label="确认密码:">
              <el-input show-password v-model="form.password1" placeholder="请再次输入密码" maxlength="20"> </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
              <el-button @click="handleCancel">取消</el-button>
              <el-button :loading="loading" type="primary" @click="handleSubmit">立即重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiSysUserResetPwd } from '@/api/system'
import { isPassword } from '@/utils/validate'

export default {
  name: 'DialogResetPassword',
  props: {
    id: String,
  },
  data() {
    var validaPassword = (rule, value, callback) => {
      if (value && !isPassword(value)) {
        callback(new Error('密码6~20位 必须含大写字母、小写字母、数字'))
      } else {
        callback()
      }
    }
    var validaPassword1 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      form: {
        password: '',
        password1: '',
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validaPassword, trigger: 'blur' },
        ],
        password1: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validaPassword1, trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 取消
    handleCancel() {
      this.$emit('close')
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        apiSysUserResetPwd({
          id: this.id,
          pwd: this.form.password,
        })
          .then((res) => {
            this.loading = false
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            setTimeout(() => {
              this.$emit('success')
            }, 1000)
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
  },
}
</script>
